<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="header-box">
        <img src="../assets/logo.png" alt />
        <!-- 头部导航 -->
        <!-- :default-active="activfeIndex" -->
        <el-menu
          
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4">
            <a href="https://www.ele.me" target="_blank">订单管理</a>
          </el-menu-item>
        </el-menu>

      </div>
    </el-header>
    <!-- 内容区域 -->
    <el-main>
      Main
      <!-- 路由占位符 -->
        <router-view></router-view>
      <el-button type="info" @click="logout">退出</el-button>
      <!-- 轮播图 -->
      <el-carousel trigger="click" indicator-position="outside">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3>{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
      
    </el-main>
    <!-- 底部区域 -->
    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script>
export default {
  created(){
    // this.getMenuList()
  },
    data(){
        return{
             activeIndex: '1',
             activeIndex2: '1',
             menulist:[]
        }
    },
  methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    logout() {
      // 清除token
      //   window.sessionStorage.clear()
      //   this.$router.push('/login')
    },
    // 获取列表数据
  //  async getMenuList(){
  //   //  解构赋值
  //    const {data:res} = await this.$http.get('请求路径')
  //    if(!res.meta.status !==200) return this.$message.error(res.meta.msg);
  //     this.menulist = res.data
  //   }
  }
}
</script>

<style lang="less" scoped>
.el-header {
  background-color: #373d41;
  .header-box {
    width: 1020px;
    background-color: #fff;
    height: 100%;
    margin: 0 auto;
    display: flex;
    > img {
      width: 120px;
      height: 100%;
    }
  }
}
.el-main {
  background-color: #666;
}
.home-container {
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>